<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/dialog.css">
    <link rel="stylesheet" href="css/page6.css">
    <link rel="stylesheet" href="css/fly.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // viewport 设置
        // 针对原来高清方案的基础, 增加了根据屏幕宽度计算不同font-size 来达到对不同屏幕的适配
        var win = window;
        win.flex = function (baseFontSize, fontscale) {
            var targetWidth = 375;
            var screenWidth = win.screen.width;
            var _baseFontSize = (baseFontSize || 100) * screenWidth / targetWidth;
            var _fontscale = fontscale || 1;

            var doc = win.document;
            var ua = navigator.userAgent;
            var matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
            var UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
            var isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
            var isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
            var dpr = win.devicePixelRatio || 1;
            if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
                //在部分4.3及以下安卓机型中，screen.width是物理像素宽度，暂时没有找到准确判断的方法，所以不做针对375宽度的缩放
                _baseFontSize = baseFontSize || 100;
                // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
                dpr = 1;
            }


            var scale = 1 / dpr;

            var metaEl = doc.querySelector('meta[name="viewport"]');
            if (!metaEl) {
                metaEl = doc.createElement('meta');
                metaEl.setAttribute('name', 'viewport');
                doc.head.appendChild(metaEl);
            }
            metaEl.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale +
                ',maximum-scale=' + scale + ',minimum-scale=' + scale);
            doc.documentElement.style.fontSize = _baseFontSize / 2 * dpr * _fontscale + 'px';
        };

        flex(100, 1);
    </script>
</head>

<body>
    <div id="page6">
        <div class="title scale_title"></div>
        <div class="form_wrap">
            <div class="form">
                <div class="info1">
                    <div class="lable">
                        <img src="./assets/images/page6/lable1_03.png" alt="">
                    </div>
                    <div class="name">
                        <input class="name_input" type="text" placeholder="请填写">
                    </div>
                </div>
                <div class="info2">
                    <div class="lable">
                        <img src="./assets/images/page6/lable2_03.png" alt="">
                    </div>
                    <div class="place">

                        <select name="place" class="place_select">
                            <option value="0">请填写</option>
                            <option value="1">龙港新城</option>
                            <option value="2">月湖公园</option>
                            <option value="3">恒大逸合城</option>
                        </select>

                    </div>
                </div>
            </div>
            <div class="city">
                <div class="line1">
                    <img src="./assets/images/page6/city1.png" alt="">
                    <img src="./assets/images/page6/city2.png" alt="">
                </div>
                <div class="line2">
                    <img src="./assets/images/page6/city3.png" alt="">
                </div>
            </div>
        </div>

        <div class="wave wave1">
            <div></div>
        </div>
        <div class="wave wave2"></div>
        <div class="arrow move_arrow"></div>

        <div class="tipsbg tipsinfo">
            <div class="dialog">
                <div class="dialog_title">
                    <strong>信息提示</strong>
                </div>
                <div class="dialog_content">
                    请选择你想表白的对象
                </div>
                <div class="dialog_btn">
                    确定
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(document).ready(function () {


        var page6Fun = function () {
            $page6Arrow = $("#page6 .arrow");
            $page6Input = $("#page6 .name_input");
            $page6Selection = $("#page6 .place_select");
            $page6Dia = $("#page6 .tipsbg")
            $page6DiaCon = $("#page6 .tipsbg .dialog_content")
            $page6DiaBtn = $("#page6 .tipsbg .dialog_btn")

            function showTip(content) {
                console.log("content", content)
                $page6DiaCon.html(content);
                $page6Dia.show();
            }

            function hideTip() {
                $page6Dia.hide();
            }

            $page6DiaBtn.on("click", function () {

                $page6Dia.hide();
            })

            $page6Arrow.on("click", function () {
                var $page6InputVal = $page6Input.val()
                var $page6SelectVal = $page6Selection.val()
                if (!$page6InputVal) {
                    console.log("333333333")
                    showTip("请选择您想表白的对象");
                } else if ($page6SelectVal == "0") {
                    showTip("请选择您想表白的坐标");
                } else {
                    window.location.href = "./page7.html?name=" + $page6InputVal + "&place=" +
                        $page6SelectVal;
                }

                console.log("1111111")
                console.log($page6Input.val())
                console.log($page6Selection.val())

            })
        }

        page6Fun();



    });
</script>

</html>